<template>
    <div id="app">

        <div class="list-group">

            <div class="navbottom">
                <router-link to="page"><p> <img src="static/img/dibu1.PNG" alt="" class="dibu"></p></router-link>
            </div>

            <div class="navbottom">
                <router-link to="found"><p> <img src="static/img/dibu2.PNG" alt="" class="dibu"></p></router-link>
            </div>

            <div class="navbottom">
                <router-link to="center"><p> <img src="static/img/dibuss.PNG" alt="" class="dibuco"></p></router-link>
            </div>
            <div class="navbottom">
                <router-link to="message"><p> <img src="static/img/dibu3.PNG" alt="" class="dibu"></p></router-link>
            </div>
             <div class="navbottom">
                <router-link to="my"><p> <img src="static/img/dibu4.PNG" alt="" class="dibu"></p></router-link>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      
        color: #2c3e50;
        margin-top: 60px;
    }
    .list-group {
        position: fixed;
        bottom: 0;
        width: 100%;
        /* margin-left: -.3rem; */
          text-align: center;
           background: #2D2D2D;
    }
    .navbottom {
        width: 2rem;    
        float: left;
        /* margin: 0;
        padding: 0; */
    }
   p{
       font-size: .4rem;
          color: #ffffff;
        text-decoration: none;
        
   }
    .dibuco{
        margin-top: .2rem;
    }
   .dibu{
       margin-top: .3rem;
       width: .6rem;
   }
</style>